<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后端flask开发与前端Vuejs整合</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    {#  this.$http.get("/api/books").then(rsp => { }  #}
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
</head>
<body>
{# div 把含vue代码的包含进来 #}
<div id="app">
    <h1>Flask & Vuejs-{{ title }}</h1>
    <table border="1" cellpadding="5" cellspacing="5">
        <tr>
            <th>#</th>
            <th>标题</th>
            <th>作者</th>
            <th>定价</th>
        </tr>
        <tr v-for="book in books">
            <td>[[ book.id ]]</td>
            <td>[[ book.title ]]</td>
            <td>[[ book.author ]]</td>
            <td>[[ book.price ]]</td>
        </tr>
    </table>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            books: [],
        },
        delimiters: ["[[", "]]"],
        mounted: function () {
            this.fetchData();
        },
        methods: {
            fetchData() {
                this.$http.get("/api/books").then(rsp => {
                    this.books = rsp.body
                }, err => {
                    console.log('Error')
                });
            }
        }
    });
</script>
</body>
</html>
